<extend name="Index/index" />
<block name="main">
<head>
    <meta  content="text/xml" charset="UTF-8">
    <title>好友列表</title>
    <script src="__PUBLIC__/js/home_index/jquery-1.8.3.min.js"></script>
    <style>
        .speaker{
            float: left;
        }
        .floatRight{
            float: right;
                color: #b9b8b8;
        }
        .ml{
            margin-left: 20px;
        }
        #online_list li{
            display: block;
            width: 200px;
            text-align: center;
        }
        #online_list li a{
            text-decoration: none;
            color: blueviolet;
        }
        #adv{
            position: fixed;
            top: 94px;
            right: 0px;
        }
    </style>
</head>
<body>
        <!-- <center> -->
        <h1 style="margin-left: 555px">dota2公共聊天室</h1>
            <h3 style="display: block; width: 200px;text-align: center;" >当前在线用户</h3>
        <ul id="online_list" style="border: 2px solid black;display: block;width: 200px;height:358px;float: left; overflow-y:hidden; overflow-y: scroll;">
          <volist name="list" id='v'>
              <!-- <li><a href="<{$v.u_cid}>"><{$v.u_nickname}></a></li> -->
          </volist>
        </ul>
        
        <div id="box" style=" background-color: #353A42; border: 10px solid #353A42; width:800px; height: 340px; margin-left: 280px; border-radius:5px; overflow-y:auto; position: relative; white-space: normal;word-wrap:break-word;overflow-y: scroll;">
        </div>
        <div>
        <textarea name="" id="con" cols="95" autofocus="" rows="10" style="height: 50px ;margin-left:76px"></textarea>
        <!-- <input type="text" id="con" value="" autofocus="on"> -->
        <input type="hidden" id="u_cid" value="<{$u_cid}>">
        <input type="hidden" id="sender" value="<{$email}>">
        <button id="confirm" style="height: 50px;width: 213px;" >发送</button>
        <div id="thediv" style="margin-left:280px;display: none;"></div>
        </div>


        <ul id="adv" style="display: block;/* width: 300px;height:200px; */float: right;">
        <!-- <h2 style="text-align: center;">广告</h2> -->
        <volist name='ad' id='a'>
        <h2 style="text-align: center;"><{$a.ad_name}></h2>  
        <a href="<{$a.ad_link}>">
          <img width= 250 height="320" src="../../Public/Uploads/ad/<{$a.ad_address}>" alt="">
        </a>
        </volist>
        </ul>


        <!-- </center> -->
<script>
    $(function(){
        $('#confirm').click(function(){
         var content = $('#con').val();
         if(content==""){
            alert('输入内容不可以为空');
            return false;
         }
         // var u_cid = $('#u_cid').val();
         var sender = $('#sender').val();
            $.ajax({
                url:"<{:U('Home/Chat/message')}>",
                type:"POST",
                data:{'content':content,'sender':sender},
                dataType:'json', 
                success: function(data){
                    // alert(data);
                }
                })
        $("#con").attr("value","");
        })
        //向服务器请求聊天内容加载在页面内
        setInterval(function(){
            var box = $('#box').html;
            $.ajax({
                url:"<{:U('Home/Chat/getMes')}>",
                type:"GET",
                // data:{'content':content,'sender':sender},
                dataType:'text', 
                success: function(data){
                    // $data = jQuery.parseHTML(data);
                $('#box').html('');
                $('#box').append(data);
                    // console.log(data);
                }
                })
            //实时向服务器发送时间戳
            var checkTime = Math.floor($.now() / 1000);
            $.ajax({
                url:"<{:U('Home/Chat/checkTime')}>",
                type:"GET",
                data:{'online':checkTime},
                dataType:'text', 
                success: function(data){
                    // alert(1);
                    $('#online_list li').remove();
                    $('#online_list').append(data);
                }
                })
        },1000);
      //   //设置没三秒才能发送一次
      // var odiv=document.getElementById("thediv"); 
      // var obt=document.getElementById("confirm"); 
      // var count=0; 
      // var flag=null; 
      // function done(){ 
      //   if(count==0){ 
      //     clearInterval(flag); 
      //   }  
      //   else{ 
      //     count=count-1; 
      //   } 
      // } 
      // obt.onclick=function(){ 
      //   var val=parseInt(odiv.innerHTML); 
      //   if(count==0){ 
      //     odiv.innerHTML=val+1; 
      //     count=3; 
      //     flag=setInterval(done,1000); 
      //   } 
      //   else{ 
      //     alert("还需要"+(count)+"秒才能点击"); 
      //   } 
      // } 

        })
</script>
</block>
</body>
</html>